<style>
    .mailModal {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<template>
    <ApplyListTemplate applyListClass="creditReturn">
        <template slot="applyQueryForm">
            <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form rui-query-form">
                <div class="applyQuerySearchRow">
                    <div class="applyQueryHead"></div>
                    <div class="applyQuerySearchItem">
                        <Form-item prop="typeId">
                            <div>
                                <Select v-model="searchForm.typeId" @on-change="handleSearch" placeholder="奖励类型" prefix="ios-search" clearable >
                                    <Option v-for="item in typeList"  :value='item.rewardTypeid' :key="item.rewardTypeid">{{ item.typename }}
                                    </Option>
                                </Select>
                            </div>
                        </Form-item>
                    </div>
                </div>
            </Form>
        </template>
        <template slot="applyQueryBtn"></template>
        <template slot="applyQueryTable">
            <Table :loading="loading" :columns="columns" :data="data" sortable="custom" ref="table">
                <template slot-scope="{ row, index }" slot="action">
                    <div class="btn-no-border">
                        <Button ghost style="margin-right:5px" type="primary" size="small"
                                 @click="determine(row)">重新上传
                        </Button>
                    </div>
                </template>
                <template slot-scope="{ row, index }" slot="status">
                    <div>
                        <span >{{row.name}}</span>
                    </div>
                </template>
            </Table>
        </template>
        <template slot="applyQueryPage">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                  @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                  size="small" show-total show-elevator show-sizer></Page>
        </template>
        <template slot="applyQueryMore">
            <Modal :title="modalTitle" v-model="deterModalVisible" :mask-closable='false' :width="400"
                   class="mailModal">
                上传附件：<Button icon="ios-cloud-upload-outline">选取文件</Button>
                <div slot="footer">
                    <Button type="primary" @click="determineCheck">上传</Button>
                </div>
            </Modal>
        </template>
    </ApplyListTemplate>
</template>
<script>
    import ApplyListTemplate from '_p/afs-apply/pages/common/ApplyListTemplate'
    import {
        getList,
    } from "../../api/credit-return/creditReturn";
    import {getTypeId} from "../../api/credit-reward/creditRewardDefine";
    import Detail from "_p/basic/pages/contract/post-loan-info-change/change-bank-card-detial/change-bank-card-detial";

    export default {
        name: "rebateReturn",
        components: { ApplyListTemplate },
        data() {
            return {
                loading: false,
                submitLoading: false,
                mailModalVisible: false,
                deterModalVisible: false,
                total: 0,
                typeList:[],
                modalTitle: "",
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    typeId:'',
                },
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        ellipsis: true,
                        tooltip: true,
                    },  {
                        title: "摊销奖励名称",
                        key: "typename",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "银行账号",
                        key: "bankaccount",
                        align: "center",
                        minWidth: 180,
                    },
                    {
                        title: "金额",
                        key: "money",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "状态名称",
                        key: "statusname",
                        align: "center",
                        minWidth: 100,
                    },
                    {
                        title: "合同激活开始日期",
                        key: "startdate",
                        align: "center",
                        minWidth: 140
                    },
                    {
                        title: "合同激活截止日期",
                        key: "enddate",
                        align: "center",
                        minWidth: 140,
                    },
                    {
                        title: "案件类别名称",
                        key: "categoryname",
                        align: "center",
                        minWidth: 100
                    },
                    {
                        title: "合同数量",
                        key: "contractnum",
                        align: "center",
                        minWidth: 100
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 100,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
            }
        },
        methods: {
            //查询按钮操作
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.queryData();
            },
            //多条件分页查询
            queryData(pageNumber = 1, pageSize = 10) {
                if(this.searchForm.startDate>this.searchForm.endDate){
                    this.$Message.error("时间范围错误");
                }else {
                    let params = {
                        page: pageNumber,
                        pagesize: pageSize,
                        typeId:this.searchForm.typeId
                    };
                    getList(params).then(res => {
                        if (res.code === "0000") {
                            this.data = res.data.records;
                            this.total = res.data.total;
                        }
                    });
                }
            },
            determine(row) {
                this.modalTitle="重新上传返利回执";
                this.deterModalVisible = true;
            },
            determineCheck() {
                alert("确认上传回执");
            },
            //改变当前页码
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.queryData(v, this.searchForm.pageSize);
            },
            //改变页码数量
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.queryData(this.searchForm.pageNumber, v);
            },
            gettypeList() {
                let params=null;
                getTypeId(params).then(res => {
                    this.operationLoading = false;
                    if (res.code === "0000") {
                        this.typeList=res.data.data;
                    }
                });
            },
            //重置表单数据,并重新加载数据
            handleReset() {
                //this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.searchForm.typeId="";
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                this.queryData();
            },
        },
        mounted() {
            this.handleSearch();
            this.gettypeList();
        }
    }
</script>
